import {BrowserRouter, HashRouter, Route, Routes} from "react-router-dom";
import React from "react";
import {createStyles} from "antd-style";
import IntroPage from "@/components/page/IntroPage";
import PhotoPage from "@/components/page/PhotoPage";
import VideoPage from "@/components/page/VideoPage";
import MdPage from "@/components/page/MdPage";
import PhotoPage2 from "@/components/page/PhotoPage2";
import PhotoPage3 from "@/components/page/PhotoPage3";

const useStyle = createStyles(({css}) => {
    const loadingStyle = css`
      width: 100vw;
      height: 100vh;
      display: grid;
      place-content: center;
      div {
        font-size: 30px;
      }
    `
    return {
        loadingStyle
    }
})

const AppRouter: React.FC  = () => {
    const {styles} = useStyle();
    const loadingComponent = (
        <div className={styles.loadingStyle}>
            <div>Loading...</div>
        </div>
    )
    return (
        <HashRouter>
            <Routes>
                <Route path="/" element={<IntroPage/>}></Route>
                <Route path="/photo" element={
                    <React.Suspense fallback={loadingComponent}>
                        <PhotoPage/>
                    </React.Suspense>
                }></Route>
                <Route path="/photo2" element={
                    <React.Suspense fallback={loadingComponent}>
                        <PhotoPage2/>
                    </React.Suspense>
                }></Route>
                <Route path="/photo3" element={
                    <React.Suspense fallback={loadingComponent}>
                        <PhotoPage3/>
                    </React.Suspense>
                }></Route>
                <Route path="/video" element={
                    <React.Suspense fallback={loadingComponent}>
                        <VideoPage/>
                    </React.Suspense>
                }></Route>
                <Route path="/md" element={
                    <React.Suspense fallback={loadingComponent}>
                        <MdPage/>
                    </React.Suspense>
                }></Route>
            </Routes>
        </HashRouter>
    )
}

export default AppRouter;
